<template>
    <div>
        <!-- 初始化界面 -->
        <TopFilter
                :list="topFilterList"
                @filterChange="changeHandle" ></TopFilter>
        <FilterTable
            ref="table"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :isSelectColumn="false"
            :isConfigPageSize="50"
            :datakey="'records'"
            columnsRef="userManage"
            :onColumnsChange="(columns) => (this.columns = columns)"
        >
            <template slot="controls">
                <el-button size="small" type="primary" @click="addhandle">新增</el-button>
            </template>

        </FilterTable>
        <Drawer
                :visible.sync="addVisible"
                title="添加备件分类"
                :width="900"
                destroyOnClose
                :containerStyle="{  height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '24px' }">
            <addForm  @close="closeaddHandler"/>
        </Drawer>
        <Drawer
                :visible.sync="editVisible"
                title="修改备件分类"
                :width="900"
                destroyOnClose
                :containerStyle="{  height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '24px' }">
            <addForm :rowData="formdata" @close="closeEditHandler"/>
        </Drawer>
    </div>
</template>

<script>
import { getPartTypeBaseInfoPage } from '@/api/partsmanage/partTypeBase/query';
import AddForm from './addForm';
export default {
  name: 'partTypeBase',
  components: { AddForm},
  data() {
    return {
      formdata: null,
      editVisible: false,
      addVisible: false,
      dialogWidth: '920px',
      attVisible: false,
      dialog: {
        title: '新增',
        component: null,
        visible: false,
        width: '',
        initData: null,
        showType: 'add',
      },
      title: '',
      topFilterList: this.createTopFilterList(),
      visible: false,
      fetchApi: getPartTypeBaseInfoPage,
      fetchParams: {
        xhrAbort: true,
        code: '',
        partTypeName: '',
      },
      columns: this.createTableColumns(),
      userId: '',
      smsTypeShow: false,
      userNum: '',
      userName: '',
      isDisabled: false,
    };
  },
  mounted() {
    // 分页
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    closeEditHandler() {
      this.editVisible = false;
      this.fetchParams = Object.assign({}, this.fetchParams, { xhrAbort: false });
    },
    closeaddHandler() {
      this.addVisible = false;
      this.fetchParams = Object.assign({}, this.fetchParams, { xhrAbort: false });
    },
    closeHandlerAttrMain(val, type) {
      this.attVisible = val;
      if (type == 'refresh') {
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeExportHandler(){
      this.attVisible = false;
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 350,
          fixed: 'left',
          render: (props) => {
            return (
              <div>
                <el-button size = "mini" type = "text" onClick = {() => this.edit(props.row, { title: '修改', Type: 'edit' })}>
               明细
                </el-button>
              </div>
            );
          },
        },
        {
          title: '备件代码',
          dataIndex: 'code',
        },
        {
          title: '备件名称',
          dataIndex: 'typeName',
        }
      ];
    },
    closeDialog(){
      this.dialog.visible = false
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '备件代码',
          fieldName: 'code',
        },
        {
          type: 'INPUT',
          label: '备件名称',
          fieldName: 'partTypeName',
        }
      ];
    },
    changeHandle(val) {
      // this.fetchParams = Object.assign({}, val, { xhrAbort: false });
      const newVal = JSON.parse(JSON.stringify(val));
      this.fetchParams = Object.assign({}, newVal);
    },
    // 新增
    addhandle() {
      this.addVisible = true
    },
    // 返回
    backHandle() {
      this.isShow = false;
    },
    edit(data, config) {
      this.editVisible = true
      data.flag = 2
      this.formdata = data;
    }
  },
};
</script>

<style lang="less" scoped>
    .el-checkbox + .el-checkbox {
        margin-left: 0px;
    }

    .el-checkbox {
        margin-right: 25px;
    }

    .menu-header {
        height: 30px;
        line-height: 30px;
        margin-bottom: 5px;
        background: #eee;
        text-indent: 5px;
    }
    .employeeAuthMain {
        box-sizing: border-box;
        overflow: hidden;
        .mainLeft {
            width: 25%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            float: left;
            // padding: 10px;
            box-sizing: border-box;
        }

        .mainRight {
            width: 75%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            float: left;
            box-sizing: border-box;
            // padding: 10px;
            border-left: 2px solid #eee;
        }
    }
</style>
